#issue 977 feat: add global keyboard shortcut Alt+T / Option+T (in Mac) to toggle theme …#985
Conversation
|
@coutKaustubh is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
There was a problem hiding this comment.
Thanks for your first PR on DevTrack! 🎉
A maintainer will review it within 48 hours. While you wait:
- Make sure CI is passing (type-check + lint)
- Double-check the PR description is filled out and the issue is linked
- Feel free to ask questions in Discussions if you need help
If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!
|
I have solved the issue .. Please look towards it and tell me if any error @Priyanshu-byte-coder |
Priyanshu-byte-coder
left a comment
There was a problem hiding this comment.
Great feature! One thing to clean up before merge:
package-lock.json has 22k lines of unrelated changes. Please regenerate it by running npm install on a clean checkout of latest main and commit only the lockfile diff related to any packages your PR actually adds.
|
Thanks for pointing that out! I've cleaned up the unrelated |
|
Hi! This PR now has a merge conflict (on KeyboardShortcuts.tsx / ShortcutsModal.tsx) after the shortcut hover flicker fix (#983) was just merged. Please rebase onto the latest main and resolve conflicts — the Alt+T shortcut is approved and we want to merge it! |
6920f21 to
66f8d41
Compare
|
I have resolved merge conflicts , Kindly go merge it |
Description
This pull request adds a global keyboard shortcut (
Alt + Ton Windows/Linux andOption + Ton macOS) to toggle the dark/light theme across all application pages (including the dashboard, settings, and public profile pages). It also updates the Shortcuts panel to dynamically reflect the correct keys depending on the client OS.Problem
Previously, the theme toggle shortcut triggered on the letter
Talone (prone to accidental triggers) and was only active on the Dashboard page because the listener was coupled with the Dashboard Header component. On the settings or public profile pages, it did not work. Additionally, the shortcuts overlay listed the key as"T".Solution
GlobalKeyboardShortcuts.tsx: A new root-level, headless keyboard shortcut listener component mounted insideProviders.tsx. It handles the global key combinations and includes screen-reader accessibility announcements (aria-live="polite").ShortcutsModal.tsxusingnavigator.userAgentto displayOption + Ton Mac platforms andAlt + Ton other operating systems.KeyboardShortcuts.tsxinto a lightweight trigger button that dispatches a custom window event (openShortcuts) to open the global shortcuts modal.input,textarea,select, orcontenteditablecontainer.Acceptance Criteria Checklist
Alt+T/Option+Ttoggles theme globally.Option + T(on Mac) orAlt + T(on Windows/Linux).How to Test
Alt+T(orOption+Ton Mac) on the dashboard, settings page, and public profile page to verify the theme toggles globally.?on the keyboard to open the Shortcuts modal.Option + Ton macOS devices andAlt + Ton Windows/Linux devices.